<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    
        span{
            width: 42px;
            height: 42px;

            /* 设置取精灵图的位置，0表示水平距离， 向下移动80px注意要写上单位px */
            /* 竖直方向写-80，表示让精灵图向上移动80个像素 */
            background: pink url("../day01/images/bg01.png") 0 -80px; 
            display: inline-block;
        }
        
    </style>
</head>
<body>
    
    <!-- CSS雪碧图，许多小图标的集合到一张大图上显示 -->
    <!-- CSS精灵图可以减少服务器被请求的次数，使用方法就是background属性显示精灵图的一部分，而img属性不能设置只显示一部分 -->

    <span></span>

    <!-- Emet语法，父子关系使用>，含有内容文字的话使用花括号{文字} -->
    <!-- div.box -->
    <div class="box"></div>
    <div id="box"></div>

    <!-- ul>li*10>a{文字$} -->
    <ul>
        <li><a href="">文字1</a></li>
        <li><a href="">文字2</a></li>
        <li><a href="">文字3</a></li>
        <li><a href="">文字4</a></li>
        <li><a href="">文字5</a></li>
        <li><a href="">文字6</a></li>
        <li><a href="">文字7</a></li>
        <li><a href="">文字8</a></li>
        <li><a href="">文字9</a></li>
        <li><a href="">文字10</a></li>
    </ul>

</body>
</html>